import styled from 'styled-components'
import logoPic from '../../static/images/nav-logo.png'

//styled创建一个有样式的标签，实际上是组件，不会影响其他组件
export const HeaderWrapper = styled.div`
    position:relative;
    height:56px;
    border-bottom:1px solid #f0f0f0; 
`
export const Logo = styled.div`
    height:56px;
    position:absolute;
    top:0;
    left:0;
    width:100px;
    display:block;
    background:url(${logoPic}) center center;
    background-size:cover;
`
export const Nav = styled.nav`
    width: 960px;
    margin-right: auto;
    margin-left: auto;
    height:56px;
`
export const NavItem = styled.a`
    line-height:56px;
    padding:0 15px;
    font-size:17px;
    &.left{
        float:left;
    }
    &.right{
        float:right;
        color:#969696;
    }
    &.active{
        color:#ea6f5a;
    }
    .iocn-A{
        width:20px;
        display:inline-block;
    }
`
export const NavSearchBox = styled.div`
    padding: 0 40px 0 20px;
    float: left;
    position: relative;
    width: 160px;
    height: 38px;
    font-size: 14px;
    margin-top: 8px;
    margin-left:20px;
    border: 1px solid #eee;
    border-radius: 40px;
    background: #eee;
    transition: width .5s;
    -moz-transition: width .5s;
    -webkit-transition: width .5s;
    -o-transition: width .5s;
    transition-delay: .1s;
    -moz-transition-delay: .1s;
    -webkit-transition-delay: .1s;
    -o-transition-delay: .1s;

.icon-search{
    position:absolute;
    right: 4px;
    top: 4px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    text-align: center;
    transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition-delay: .1s;
    -moz-transition-delay: .1s;
    -webkit-transition-delay: .1s;
    -o-transition-delay: .1s;
}
&.focused{
    width: 240px;
}
.icon-focused{
    background: rgba(0,0,0,.6);
    color: #fff;
}
`

export const NavSearch = styled.input.attrs({
    placeholder:'搜索'
})`
    line-height: 38px;
    background: none;
    border: 0;
    width: 100%;
    
`

export const Addition = styled.div`
    position:absolute;
    right:0;
    top:0;
    height:56px;
`
export const Button = styled.div.attrs({
    placeholder:'搜索'
})`
    float:right;
    font-size:14px;
    padding:0 30px;
    margin-top:9px;
    margin-right:20px;
    line-height:38px;
    border-radius:19px;
    border:1px solid #ec6149;
&.reg{
     color:#ec6149;
}
&.writting{
    color:#fff;
    background:#ec6149;
}
.icon-writting{
    margin-right:10px;
}
`
export const SearchInfo= styled.div`
 background:#fff;
 position:absolute;
 left:0;
 top:56px;
 width:200px;
 padding:0 20px;
 box-shadow:0 0 8px rgba(0,0,0,.2);
 >div{clear:both}
`
export const SearchInfoTitle = styled.div`
 float:left;
 margin-top:20px;
 margin-bottom:15px;
 line-height:20px;
 font-size:14px;
 color:#969696;
`
export const SearchInfoSwitch = styled.span`
 display:block;
 float:right;
 font-size:13px;
 margin-top: 20px;
 cursor: pointer;
 margin-bottom: 15px;
 color:#969696;
 .spin{
     font-size:10px;
     transition:all .2s ease-in;
     display: block;
     float: left;
     transform-origin:center center;
 }
 
`

export const SearchInfoItem = styled.a`

 display:inline-block;
 margin-right:10px;
 line-height:20px;
 margin-bottom:10px;
 padding:0 5px;
 font-size:12px;
 border:1px solid #ddd;
 color:#787878;
 border-radius:2px;
`

export const SearchInfoList = styled.div`


`